<template>
  <view class="quntuanListPage">
    <head-box></head-box>
    <view class="quntuanListPage-box tab-botton">
      <view class="quntuanListPage-main">
        <view class="quntuanListPage-main-header">
          <div class="quntuanListPage-main-title">群团列表</div>
          <div class="qun-one flex">
            <view class="one-up-add" @tap="$api.handleMenu(`/pages/individualsIntoAgroupOf/individualsIntoAgroupOf?time=ivInt`)">个人入群</view>
            <view class="one-up-add" @tap="$api.handleMenu('/pages/alliance/alliance')">单位建群</view>
          </div>
        </view>

        <view class="_main-list">
          <view
            class="_main-list-item"
            @tap="$api.handleMenu(`/pages/quntuanDetailPage/quntuanDetailPage?id=${item.id}`)"
            v-for="(item, index) in list"
            :data-id="item.id"
          >
            <view class="_main-list-item-box">
              <view class="_main-list-item-box-header">
                <view class="_main-list-item-box-title">{{ item.gpinfoName }}</view>
                <view class="_text-more">详情</view>
              </view>
              <view class="_main-list-item-box-win">
                <view class="_main-list-item-box-logo"
                  ><image class="_logo" :src="$imageUrl+item.gpinfoLogo" mode="aspectFit"></image
                ></view>
                <view class="_main-list-item-box-content">
                  <view class="_main-list-item-box-content-text">
                    {{ item.gpinfoIntroduce }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
      </view>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
import { group1 } from '@/mixins/group-1'
import {gpGpinfoList} from '@/api/group'
  export default {
    mixins:[group1],
    data() {
      return {
      }
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //群团列表
     async  getList() {
       await this.getLists(gpGpinfoList,{pageSize:10,pageNo:this.pageNo})
      },
    },
  }
</script>

<style lang="scss">
  .quntuanListPage {
    width: 100%;
    min-height: 100vh;
    .quntuanListPage-box {
      padding: 20rpx;
      box-sizing: border-box;
    }
    .quntuanListPage-main {
      width: 100%;
      .quntuanListPage-main-header {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 20rpx 0;
      }
      .quntuanListPage-main-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
        border-left: 6rpx solid #0071fc;
        padding-left: 20rpx;
      }
      .qun-one{
        .one-up-add{
          margin:0 20rpx;
        }
      }
      .one-up-add {
        padding: 7rpx 30rpx;
        border-radius: 10rpx;
        border: 1px solid #007aff;
        background-color: #007aff;
        font-size: 30rpx;
        text-align: center;
        color: #ffffff;
      }
      ._main-list {
        width: 100%;
        margin-top: 30rpx;
        ._main-list-item {
          width: 100%;
          border-radius: 10rpx;
          box-shadow: 0px 9rpx 21rpx 3rpx rgba(99, 99, 99, 0.23);
          padding: 10rpx;
          box-sizing: border-box;
          margin-bottom: 30rpx;
          ._main-list-item-box {
            width: 100%;
            height: 100%;
            ._main-list-item-box-header {
              width: 100%;
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              border-bottom: 1px solid #eeeeee;
            }
            ._main-list-item-box-title {
              height: 60rpx;
              font-size: 28rpx;
              font-weight: 600;
              color: #333;
              line-height: 60rpx;
              padding-left: 16rpx;
              padding-bottom: 8rpx;
            }
            ._text-more {
              font-size: 24rpx;
              display: inline-block;
              padding: 0rpx 12rpx;
              border-radius: 100rpx;
              color: #fff;
              background-color: #dd524d;
              line-height: 40rpx;
              height: 40rpx;
              margin-top: 10rpx;
              margin-right: 16rpx;
            }
            ._main-list-item-box-win {
              display: flex;
              flex-wrap: nowrap;
              justify-content: flex-start;
              align-items: center;
              padding: 20rpx;
            }
            ._main-list-item-box-logo {
              width: 160rpx;
              height: 160rpx;
              ._logo {
                width: 100%;
                height: 100%;
              }
            }
            ._main-list-item-box-content {
              width: calc(100% - 180rpx);
              margin-left: 20rpx;
              ._main-list-item-box-content-title {
                width: 100%;
                text-align: center;
                font-size: 26rpx;
                font-weight: 600;
                color: #333;
                line-height: 40rpx;
              }
              ._main-list-item-box-content-text {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                font-size: 24rpx;
                color: #8f8f94;
                text-indent: 2em;
                line-height: 48rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
